{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h1>Flask Forms Demo</h1>
        <p class="lead">Chapter 4: Form Handling and Validation</p>
        
        <p>This demo showcases form handling and validation techniques.</p>
        
        <style>
            .list-group .list-group-item {
                background-color: #f8f9ff;
                border-radius: 12px;
                margin-bottom: 0.75rem;
                border: 1px solid #e0e7ff;
                transition: transform 0.15s ease, box-shadow 0.15s ease;
            }
            .list-group .list-group-item:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15);
                background-color: #eef2ff;
            }
        </style>
        
        <h3>Topics Covered:</h3>
        <ul>
            <li>Basic HTML form handling without external libraries</li>
            <li>WTForms integration for robust form handling</li>
            <li>Form validation with custom validators</li>
            <li>File upload handling</li>
            <li>CSRF protection</li>
            <li>Flash messaging for form feedback</li>
        </ul>
        
        <h3>Demo Sections:</h3>
        <div class="list-group">
            <a href="{{ url_for('basic_form') }}" class="list-group-item list-group-item-action">
                <h5>Basic Form Handling</h5>
                <p class="mb-1">Manual form processing without external libraries</p>
            </a>
            <a href="{{ url_for('wtforms_demo') }}" class="list-group-item list-group-item-action">
                <h5>WTForms Integration</h5>
                <p class="mb-1">Using WTForms for robust form handling and validation</p>
            </a>
            <a href="{{ url_for('file_upload') }}" class="list-group-item list-group-item-action">
                <h5>File Upload</h5>
                <p class="mb-1">Handling file uploads with validation</p>
            </a>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Form Best Practices</h5>
            </div>
            <div class="card-body">
                <ul>
                    <li>Always validate input data</li>
                    <li>Use CSRF protection</li>
                    <li>Provide clear error messages</li>
                    <li>Preserve form data on validation errors</li>
                    <li>Sanitize user input</li>
                    <li>Use HTTPS in production</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}